.HeaderWrapper{
    height:56px;
    width:100%;
    padding:0;
    z-index:1000;
    position: fixed;
    text-align:center;
    line-height:56px;
    background-color: #fff;
    border-bottom: 1px solid #f0f0f0;
    .outer{
        height: 56px;
        text-align: center;
        margin: 0 auto;
        min-width: 768px;
        max-width: 1440px;
        box-sizing:border-box;
    };
    .logo{
        float:left;
        display: block;
        height: 56px;
        width: 100px;
    };
    .center{
        display: block;
        width:960px;
        margin: 0 auto;
        line-height:56px;
        background-color: red;
        padding: 0 15px;
        box-sizing:border-box;
        .navitem{
            display: inline-block;
            padding:0 15px;
            font-size:17px;
            color:#333;
        }
        .active{
            color:#ea6f5a;
        }
        .left{
            float:left;
        }
        .right{
            float:right;
            color:#969696;
        }
        .searchArea {
            float: left;
            max-width: 300px;
            height: 56px;
        }
    };
    
    .additon{
        float:right;
        display: block;
        width: 350px;
        height:56px;
        line-height: 56px;
        .leftBtn{
            display: block;
            float:left;
             width: 120px;
            .login{
                float: right;
                display: inline-block;
                color: #969696;
                padding:0 15px;
                text-align: center;
                font-size:15px;
                border: 1px solid rgba(0, 0, 0, 0) ;
                // border: 1px solid red;
                // width: 60px;
                height: 56px;
                &:hover {
                    color: #333
                };
            };
            .dayNine {
                    &{
                        .login;
                    };
                    float: left;
                    font-size:17px;
            };
        };
        .rightBtn{
            display: inline-block;
            float:right;
            .writting{
                display: inline-block;
                float:right;
                color:#ffff;
                outline: none;
                font-size:15px;
                padding:0 15px;
                border-radius: 19px;
                margin:9px 10px 0 10px;
                line-height:38px;
                border: 1px solid rgba(236,97,73,.7);
                background-color:#ea6f5a;
                .writePencil{
                    padding-right:5px;
                }
            }
            .reg{
                &{
                    .writting
                };
                float: left;
                width: 80px;
                background-color: transparent;
                color:#ea6f5a;
            }
        }
    }
}


.search{
    float:left;
    display:inline-block;
    min-width: 160px;
    height: 56px;
    line-height:56px;
    .searchinput{
        float: left;
        overflow:hidden;
        width:160px;
        border-radius: 38px;
        height: 38px;
        border: 1px solid #eee;
        color: #333;
        margin-top: 9px;
        padding:0 40px 0 20px;
        box-sizing:border-box;
        background:#eee;
        font-size:14px;
        outline: none;
    } 
    .focused{
        width:240px;
    }
    .inputFocused{
        position: relative;
        margin:24px 5px 0 -35px;
        color:#fff;
        background:#6666;
    }
    .searchIconfontArea{
        float: right;
        position: relative;
        display:inline-block;
        width:30px;
        margin: 25px 5px 0 -35px;
        line-height:30px;
        text-align:center;
        bottom:12px;
        border-radius:15px;
    }
};

.searchHot{
    width:240px;
    float:left; 
    background: #fff; 
    box-shadow: 0 0 8px rgba(0,0,0,.2);
    .searchHotInner{
        border-bottom:1px solid #dedede;
         min-height:116px;
         padding:0 20px 5px 20px;
         color:rgb(51, 51, 51);
        .searchHotTitle{
            height:20px;
            line-height:20px;
            font-size:14px;
            color:#333;
            margin:9px 0 10px 0;
        }
        .handesStyle{
          float:right;
          cursor: pointer;

        }
        .searchHotContent{
            min-height:96px;
            left: 0;
            line-height: 30px;
            box-sizing: border-box;
            text-align: left;
            font-size: 14px;
            color: #969696;
            .span{
                box-sizing: border-box;
                padding: 5px 6px;
                margin: 4px 8px 1px 0;
                line-height: 12px;
                font-size: 12px;
                color: #787878;
                border: 1px solid #ddd;
                border-radius: 4px;
                display: inline-block;
                cursor: pointer;
            }
        }
        
    }
    .searchRecent{
        min-height:40px;
        //  padding:5px;
         box-sizing:border-box;
        
    }
};

.backTopShow{
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 1040;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
    width: 50px;
    height: 50px;
    border: 1px solid #dcdcdc;
}
.backTopHidden{
    visibility:hidden;
}
